<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="tableBody">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
                    </span>
                    <h3 class="card-label"> 查询区域 </h3>
                </div>
                <div class="card-toolbar">
                    <div class="example-tools justify-content-center">
                        <!-- 
                <span data-toggle="tooltip" class="example-toggle"></span>
                <span data-toggle="tooltip" class="example-copy"></span> 
              -->
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!--查询条件-->
                <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                    <div class="m-portlet__body">
                        <div class="form-group m-form__group row">
                            <div class="col-lg-3">
                                <el-select v-model="searchForm.configId">
                                    <el-option
                                    v-for="item in dataList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-12">
                                <div id="mainCPU" style="width:100%;height:300px;text-align: center;margin: auto;"></div>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-12">
                                <div id="mainMem" style="width:100%;height:300px;text-align: center;margin: auto;"></div>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-12">
                                <div id="mainMemRatiochart" style="width:100%;height:300px;text-align: center;margin: auto;"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>            
        </div>
    </div>
</template>  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            searchForm: {configId:""},
            dataList: [],
            redisCupCharts:null,
            memChart:null,
            memRatioChart:null,

        }
    },
    watch: {
        "searchForm.configId":{//监听字段变化
            handler:function(newVal,old){             
                if(newVal == "" || newVal == undefined || newVal == null){
                    this.functionInfoList = [];
                }else{
                    this.initCpuData();
                    this.initMemData();
                    this.initMemRatioData();
                }
            }
        }
    },
    components: {
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "Redis监控" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
        setTimeout(() => {
            this.initCpuChart();
            this.initMemChart();
            this.initMemRatioChart();
        }, 500);
    },
    methods: {
        initList() {
            // showWating({ renderBody: "tableBody" });
            let params = {};
            apiUtil.query(process.env.VUE_APP_OMP_API + "/omp/redisConfig/lists", params).then(({ data }) => {
                this.dataList = data.data;
            });
        },
        initCpuChart(){            
            this.redisCupCharts = this.$echarts.init(document.getElementById('mainCPU'));
            this.redisCupCharts.setOption({
                    tooltip: {
                        trigger: 'axis',
                        position: function (pt) {
                            return [pt[0], '10%'];
                        }
                    },
                    title: {
                        left: 'center',
                        text: 'CPU使用率（单位%）',
                    },
                    toolbox: {
                        feature: {
                            /*dataZoom: {
                                yAxisIndex: 'none'
                            },
                            restore: {},*/
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%']
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 100
                    }, {
                        start: 0,
                        end: 10,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 180, 0, 0.5)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series: [
                        {
                            name: '数值',
                            type: 'line',
                            smooth: true,
                            symbol: 'none',
                            sampling: 'average',
                            itemStyle: {
                                color: 'rgb(255, 70, 131)'
                            },
                            areaStyle: {
                                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(255, 70, 131)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 180, 0, 0.5)'
                                }])
                            },
                            data: []
                        }
                    ]
                });
        },
        initMemChart(){
            this.memChart = this.$echarts.init(document.getElementById('mainMem'));
            this.memChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        position: function (pt) {
                            return [pt[0], '10%'];
                        }
                    },
                    title: {
                        left: 'center',
                        text: '内存使用（单位M）',
                    },
                    toolbox: {
                        feature: {
                            /*dataZoom: {
                                yAxisIndex: 'none'
                            },
                            restore: {},*/
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%']
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 100
                    }, {
                        start: 0,
                        end: 10,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series: [
                        {
                            name: '数值',
                            type: 'line',
                            smooth: true,
                            symbol: 'none',
                            sampling: 'average',
                            itemStyle: {
                                color: 'rgb(255, 70, 131)'
                            },
                            areaStyle: {
                                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(255, 158, 68)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 180, 0, 0.5)'
                                }])
                            },
                            data: []
                        }
                    ]
                });
        },
        initMemRatioChart(){
            this.memRatioChart = this.$echarts.init(document.getElementById('mainMemRatiochart'));
            this.memRatioChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        position: function (pt) {
                            return [pt[0], '10%'];
                        }
                    },
                    title: {
                        left: 'center',
                        text: '内存碎片比率（单位%）',
                    },
                    toolbox: {
                        feature: {
                            /*dataZoom: {
                                yAxisIndex: 'none'
                            },
                            restore: {},*/
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%']
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 100
                    }, {
                        start: 0,
                        end: 10,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series: [
                        {
                            name: '数值',
                            type: 'line',
                            smooth: true,
                            symbol: 'none',
                            sampling: 'average',
                            itemStyle: {
                                color: 'rgb(255, 70, 131)'
                            },
                            areaStyle: {
                                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(255, 158, 68)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 180, 0, 0.5)'
                                }])
                            },
                            data: []
                        }
                    ]
                });
        },
        initCpuData(){
            if(null != this.searchForm.configId && '' != this.searchForm.configId && null != this.redisCupCharts){
                apiUtil.post(process.env.VUE_APP_OMP_API+"/omp/redisMain/cpu?configId="+this.searchForm.configId).then(({ data }) => {
                    let option =  this.redisCupCharts.getOption();
                    option.xAxis[0].data = data.data.xdata;
                    option.series[0].data = data.data.ydata;
                    this.redisCupCharts.setOption(option);
                });
            }         
        },
        initMemData(){
            if(null != this.searchForm.configId && '' != this.searchForm.configId && null != this.memChart){
                apiUtil.post(process.env.VUE_APP_OMP_API+"/omp/redisMain/mem?configId="+this.searchForm.configId).then(({ data }) => {
                    let option =  this.memChart.getOption();
                    option.xAxis[0].data = data.data.xdata;
                    option.series[0].data = data.data.ydata;
                    this.memChart.setOption(option);
                });
            }   
        },
        initMemRatioData(){
            if(null != this.searchForm.configId && '' != this.searchForm.configId && null != this.memRatioChart){
                apiUtil.post(process.env.VUE_APP_OMP_API+"/omp/redisMain/memFragmentationRatio?configId="+this.searchForm.configId).then(({ data }) => {
                    let option =  this.memRatioChart.getOption();
                    option.xAxis[0].data = data.data.xdata;
                    option.series[0].data = data.data.ydata;
                    this.memRatioChart.setOption(option);
                });
            }  
        },
    }
};
</script>